<template>
  <div class="credit-life">
    <div v-if="isLifeDashboardRoute">
      <el-row :gutter="20">
        <!-- 信用分展示 -->
        <el-col :span="8">
          <el-card class="credit-score">
            <template #header>
              <div class="card-header">
                <span>我的信用分</span>
              </div>
            </template>
            <div class="score-content">
              <div class="score-circle">
                <el-progress
                  type="dashboard"
                  :percentage="creditScore"
                  :color="scoreColor"
                >
                  <template #default="{ percentage }">
                    <div class="score-value">
                      <span class="number">{{ percentage }}</span>
                      <span class="label">分</span>
                    </div>
                  </template>
                </el-progress>
              </div>
              <div class="score-info">
                <p>信用等级：{{ creditLevel }}</p>
                <p>更新时间：{{ updateTime }}</p>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 信用权益 -->
        <el-col :span="16">
          <el-card class="credit-benefits">
            <template #header>
              <div class="card-header">
                <span>信用权益</span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" v-for="benefit in benefits" :key="benefit.id">
                <div class="benefit-item">
                  <el-icon :size="32" :color="benefit.color">
                    <component :is="benefit.icon" />
                  </el-icon>
                  <h3>{{ benefit.title }}</h3>
                  <p>{{ benefit.desc }}</p>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 推荐服务 -->
      <el-card class="recommended-services">
        <template #header>
          <div class="card-header">
            <span>推荐服务</span>
          </div>
        </template>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="医疗健康" name="medical">
            <el-row :gutter="20">
              <el-col :span="8" v-for="hospital in hospitals" :key="hospital.id">
                <el-card class="hospital-card" shadow="hover">
                  <img :src="hospital.image" class="hospital-image" />
                  <h3>{{ hospital.name }}</h3>
                  <p class="location">{{ hospital.location }}</p>
                  <p class="desc">{{ hospital.desc }}</p>
                  <el-button type="primary" size="small">立即预约</el-button>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="交通出行" name="transport">
            <el-row :gutter="20">
              <el-col :span="8" v-for="line in transportLines" :key="line.id">
                <el-card class="line-card" shadow="hover">
                  <div class="line-info">
                    <h3>{{ line.name }}</h3>
                    <p class="route">{{ line.route }}</p>
                    <p class="time">运营时间：{{ line.time }}</p>
                    <p class="price">票价：{{ line.price }}</p>
                  </div>
                  <el-button type="primary" size="small">扫码乘车</el-button>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="停车服务" name="parking">
            <el-row :gutter="20">
              <el-col :span="8" v-for="lot in parkingLots" :key="lot.id">
                <el-card class="lot-card" shadow="hover">
                  <div class="lot-info">
                    <h3>{{ lot.name }}</h3>
                    <p class="location">{{ lot.location }}</p>
                    <p class="capacity">剩余车位：{{ lot.available }}/{{ lot.total }}</p>
                    <p class="price">收费标准：{{ lot.price }}</p>
                  </div>
                  <el-button type="primary" size="small">立即停车</el-button>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <router-view v-else />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  FirstAidKit,
  Van,
  Location,
  Timer,
  Money,
  User
} from '@element-plus/icons-vue'

const route = useRoute();

const isLifeDashboardRoute = computed(() => {
  return route.path === '/credit/life' || route.path === '/credit/life/';
});

// 信用分数据
const creditScore = ref(720)
const updateTime = ref('2024-03-20 10:00:00')

// 信用等级
const creditLevel = computed(() => {
  if (creditScore.value >= 700) return '优秀'
  if (creditScore.value >= 600) return '良好'
  if (creditScore.value >= 500) return '一般'
  return '较差'
})

// 信用分颜色
const scoreColor = computed(() => {
  if (creditScore.value >= 700) return '#67C23A'
  if (creditScore.value >= 600) return '#409EFF'
  if (creditScore.value >= 500) return '#E6A23C'
  return '#F56C6C'
})

// 信用权益
const benefits = [
  {
    id: 1,
    title: '医疗健康',
    desc: '信用就医、免押金挂号',
    icon: 'FirstAidKit',
    color: '#F56C6C'
  },
  {
    id: 2,
    title: '交通出行',
    desc: '公交地铁信用支付',
    icon: 'Van',
    color: '#E6A23C'
  },
  {
    id: 3,
    title: '停车服务',
    desc: '信用停车、自动扣费',
    icon: 'Location',
    color: '#909399'
  },
  {
    id: 4,
    title: '预约服务',
    desc: '优先预约、快速通道',
    icon: 'Timer',
    color: '#409EFF'
  },
  {
    id: 5,
    title: '费用优惠',
    desc: '享受折扣、积分返现',
    icon: 'Money',
    color: '#67C23A'
  },
  {
    id: 6,
    title: '会员特权',
    desc: '专属服务、VIP通道',
    icon: 'User',
    color: '#9B59B6'
  }
]

// 推荐服务
const activeTab = ref('medical')

// 模拟数据
const hospitals = [
  {
    id: 1,
    name: '西湖医院',
    location: '西湖区',
    desc: '三甲医院，提供全方位医疗服务',
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 2,
    name: '城市中心医院',
    location: '上城区',
    desc: '综合性医院，设备先进',
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 3,
    name: '仁爱医院',
    location: '下城区',
    desc: '专科医院，特色诊疗',
    image: 'https://via.placeholder.com/300x200'
  }
]

const transportLines = [
  {
    id: 1,
    name: '地铁1号线',
    route: '西湖文化广场 - 火车东站',
    time: '06:00-22:30',
    price: '2-6元'
  },
  {
    id: 2,
    name: '公交K7路',
    route: '西湖 - 城站',
    time: '05:30-23:00',
    price: '2元'
  },
  {
    id: 3,
    name: '公交Y2路',
    route: '西湖 - 灵隐寺',
    time: '06:00-22:00',
    price: '2元'
  }
]

const parkingLots = [
  {
    id: 1,
    name: '西湖文化广场停车场',
    location: '西湖区',
    available: 45,
    total: 200,
    price: '5元/小时'
  },
  {
    id: 2,
    name: '城市中心停车场',
    location: '上城区',
    available: 30,
    total: 150,
    price: '6元/小时'
  },
  {
    id: 3,
    name: '商业中心停车场',
    location: '下城区',
    available: 60,
    total: 300,
    price: '4元/小时'
  }
]
</script>

<style scoped>
.credit-life {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.credit-score {
  margin-bottom: 20px;
}

.score-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-circle {
  margin-bottom: 20px;
}

.score-value {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-value .number {
  font-size: 36px;
  font-weight: bold;
  color: #303133;
}

.score-value .label {
  font-size: 14px;
  color: #909399;
}

.score-info {
  text-align: center;
}

.score-info p {
  margin: 5px 0;
  color: #606266;
}

.benefit-item {
  text-align: center;
  padding: 20px;
}

.benefit-item h3 {
  margin: 10px 0;
  font-size: 16px;
  color: #303133;
}

.benefit-item p {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.recommended-services {
  margin-top: 20px;
}

.hospital-card,
.line-card,
.lot-card {
  margin-bottom: 20px;
  text-align: center;
}

.hospital-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

.location,
.route,
.time,
.price,
.capacity,
.desc {
  color: #909399;
  font-size: 14px;
  margin: 5px 0;
}

.line-info,
.lot-info {
  padding: 15px;
  text-align: left;
}

.line-info h3,
.lot-info h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #303133;
}
</style> 